<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./elementui/vue.min.js"></script>
    <link rel="stylesheet" href="./elementui/index.css">
    <link rel="stylesheet" href="./layui/layui.css" rel="stylesheet">
    <script src="./elementui/index.js"></script>
    <script src="./layui/layui.js"></script>

    <!--    <script src="./node_modules/downloadjs/download.min.js"></script>-->

</head>
<body>
<div id="example-1">

   <!-- <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
    </el-dialog>-->

    <el-button type="primary" @click="click">主要按钮</el-button>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>  <el-table-column
            prop="date"
            label="日期"
            width="180">
    </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>  <el-table-column
            prop="date"
            label="日期"
            width="180">
    </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>  <el-table-column
            prop="date"
            label="日期"
            width="180">
    </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>  <el-table-column
            prop="date"
            label="日期"
            width="180">
    </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>




    </el-table>




</div>

<script type="module">
    var example1 = new Vue({
        el: '#example-1',
        data: {
            dialogVisible: false,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            items: [
                {message: 'Foo'},
                {message: 'Bar'}
            ]
        },
        computed: {},
        methods: {
            click() {
                // this.dialogVisible = true;
                // layer/test/index.html
                layer.open({
                    type: 2,
                    area: ['680px', '520px'],
                    content: './layer/test/index.html',
                    fixed: false, // 不固定
                    maxmin: true,
                    shadeClose: true,
                    btn: ['获取表单值', '取消'],
                    btnAlign: 'c',
                    yes: function(index, layero){
                        // 获取 iframe 的窗口对象
                        var iframeWin =  window[layero.find('iframe')[0]['name']];
                        var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
                        var value = elemMark.val();

                        if($.trim(value) === '') return elemMark.focus();
                        // 显示获得的值
                        layer.msg('获得 iframe 中的输入框标记值：'+ value);
                    }
                });


            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            filt() {
                this.items = this.items.filter(item => {
                    return item.message.match(/Foo/)
                })
            }
        },
        created() {
            this.tableData = new Array(900)
                .fill({
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                })
        }
    })
</script>
</body>
</html>
